<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import ChallengesHome from '@/challenges/ChallengesHome.vue'
import NotFound from '@/challenges/NotFound.vue'
import CopyCompContainer from '@/components/CopyCompContainer'

import routes from '@/router'
import { useDarkMode } from './hooks'
import AppHeader from './components/Header/AppHeader.vue'

const currentPath = ref(window.location.hash)
const $copy = ref()
const dynamicComp = ref()
const clip = ref<HTMLDivElement | null>(null)
const { listenDarkModeChange, darkMode } = useDarkMode()
const classObject = reactive({
  expand: false,
  shrink: false
})
// 稍微比$anim-time晚0.1s,给动画走完
const animTime = 600
let enableChange = true
listenDarkModeChange((event) => {
  console.log(`darkmode ${event}`)
  // 防止重复点击
  if (enableChange) {
    console.log('可以改变')
    enableChange = false
    // 一个render function
    dynamicComp.value = () => $copy.value.getSlot()()
    if (event === 'on') {
      expand()
    } else if (event === 'off') {
      shrink()
    }
  }
})

function shrink() {
  // 添加shrink
  classObject.shrink = true
  darkMode.value = false

  setTimeout(() => {
    // 清理工作
    dynamicComp.value = null
    classObject.shrink = false
    enableChange = true
  }, animTime)
}

function expand() {
  // 添加expand，然后动画
  classObject.expand = true

  setTimeout(() => {
    // 清理工作
    darkMode.value = true
    dynamicComp.value = null
    classObject.expand = false
    enableChange = true
  }, animTime)
}

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[(currentPath.value.slice(1) as keyof typeof routes) || '/AlignContent'] || NotFound
})
</script>
<template>
  <CopyCompContainer ref="$copy">
    <div class="challenges-container" :class="{ 'dark-mode': darkMode }">
      <AppHeader />
      <ChallengesHome :currentView />
    </div>
  </CopyCompContainer>

  <div ref="clip" class="clip" :class="classObject">
    <component :is="dynamicComp" />
  </div>
</template>
<style lang="scss" scoped>
@import './assets/_mixin.scss';
$anim-time: 0.5s;

.share-dark-theme {
  @include dark-theme();
}

.challenges-container {
  /* background-color: $white-theme; */
  @include light-theme();

  &.dark-mode {
    @extend .share-dark-theme;
  }
}

.clip {
  position: fixed;
  display: none;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.expand {
  display: block;
  width: 100%;
  height: 100%;
  animation: open $anim-time ease-out forwards;

  .challenges-container {
    @extend .share-dark-theme;
  }

  @keyframes open {
    0% {
      clip-path: circle(0% at 100% -2%);
    }
    100% {
      clip-path: circle(150% at 100% -2%);
    }
  }
}

.shrink {
  display: block;
  width: 100%;
  height: 100%;
  /* 添加forwards保留，最终动画，避免闪动 */
  animation: close $anim-time ease-out forwards;
  .challenges-container {
    @extend .share-dark-theme;
  }
  @keyframes close {
    0% {
      clip-path: circle(100% at 100% -2%);
    }
    100% {
      clip-path: circle(0% at 100% -2%);
    }
  }
}
</style>
